<script setup lang="ts">
import { ref } from "vue";

defineOptions({
  name: "HeaderPage"
});

defineProps(["form", "onSearch", "router"]);

// function onSearch() {}
// const { form } = ref();
</script>

<template>
  <div class="main bg-gray-50 w-full">
    <nav class="navbar bg-blue-gray-200 min-h-12 mb-2 z-50">
      <div class="container-fluid px-4 mx-auto">
        <div class="navbar-header mx-0 max-h-12 flex items-center space-x-4">
          <a href="" class="">
            <img src="@/assets/images/logo.png" class="logo" />
          </a>
          <el-form @submit.prevent="onSearch">
            <el-input
              v-model="form.title"
              style="max-width: 400px"
              placeholder="搜尋 識別碼, 影片, 演員"
              class="input-with-select"
            >
              <template #append>
                <el-button @click="onSearch" type="primary"> 搜尋 </el-button>
              </template>
            </el-input>
          </el-form>
          <div class="space-x-6">
            <span class="w-8"> <a href="">有碼</a></span>
            <span class="w-8"> <a href="">無碼</a></span>
            <span class="w-8">
              <router-link :to="{ path: '/login' }">管理</router-link></span
            >
            <span
              class="w-8 cursor-pointer"
              @click="router.push({ path: '/avmoo' })"
            >
              Avmoo</span
            >
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<style lang="scss" scoped></style>
